{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
<div id="compare-product" class="compare-product">
  <div class="compare-product-pc">
    <div class="compare-des">
      <div class="page-width center">
        {% if section.settings.title %}
          <div class="compare-title">
            {{ section.settings.text }}
          </div>
          <h2 class="h1">{{ section.settings.title }}</h2>
        {% endif %}
        {%- if section.settings.button_label != blank -%}
          <modal-opener class="twy-button  product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ section.id }}">
            <button id="ProductPopup-{{ section.id }}" class="tenways_button-hover product-popup-modal__button link" type="button" aria-haspopup="dialog">
              {{ section.settings.button_label | escape }}
            </button>
          </modal-opener>
        {%- endif-%}
      </div>
      <div class="compare-image">
        <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}" {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}>
          {%- if section.settings.image != blank -%}
            <img srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                                                                        {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                                                                        {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                                                                        {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                                                                        {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                                                                        {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                                                                        {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                                                                        {%- if section.settings.image.width >= 1903 -%}{{ section.settings.image | img_url: '2160x' }} 2160w,{%- endif -%}
                                                                        {%- if section.settings.image.width >= 2160 -%}{{ section.settings.image | img_url: '2160x' }} 2160w,{%- endif -%}
                                                                        {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w" src="{{ section.settings.image | img_url: '1903x' }}" alt="{{ section.settings.image.alt | escape }}" loading="lazy" width="{{ section.settings.image.width }}" height="{{ section.settings.image.height }}">
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>

  <modal-dialog id="PopupModal-{{ section.id }}" class="product-popup-modal">
    <div role="dialog" aria-label="{{ section.settings.button_label }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
      <div class="product-popup-modal__content-info">
        <div class="twy-modal__content">
          <h1 class="h2 button_label">{{ section.settings.button_label }}</h1>
          <ul class="C_product">
            <li>

              <div class="c_text">
                {% if section.settings.product_1_title %}
                  <h3 class="h2">
                    {{ section.settings.product_1_title }}
                  </h3>
                {% endif %}
                {% if section.settings.product_1_text %}
                  <div class="product_1_text">
                    {{ section.settings.product_1_text }}
                  </div>
                {% endif %}
              </div>

              <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_1 != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}" {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_1.aspect_ratio | times: 100 }}%;"{% endif %}>
                {%- if section.settings.image_1 != blank -%}
                  <img srcset="{%- if section.settings.image_1.width >= 165 -%}{{ section.settings.image_1 | img_url: '165x' }} 165w,{%- endif -%}
                                                                                                      {%- if section.settings.image_1.width >= 323 -%}{{ section.settings.image_1 | img_url: '323x' }} 323w,{%- endif -%}
                                                                                                      {%- if section.settings.image_1.width >= 360 -%}{{ section.settings.image_1 | img_url: '360x' }} 360w,{%- endif -%}
                                                                                                      {%- if section.settings.image_1.width >= 535 -%}{{ section.settings.image_1 | img_url: '535x' }} 535w,{%- endif -%}
                                                                                                      {%- if section.settings.image_1.width >= 750 -%}{{ section.settings.image_1 | img_url: '750x' }} 750w,{%- endif -%}
                                                                                                      {%- if section.settings.image_1.width >= 1070 -%}{{ section.settings.image_1 | img_url: '1070x' }} 1070w,{%- endif -%}
                                                                                                      {%- if section.settings.image_1.width >= 1500 -%}{{ section.settings.image_1 | img_url: '1500x' }} 1500w,{%- endif -%}
                                                                                                      {{ section.settings.image_1 | img_url: 'master' }} {{ section.settings.image_1.width }}w" data-src="{{ section.settings.image_1 | img_url: '1500x' }}" alt="{{ section.settings.image_1.alt | escape }}" loading="lazy" class="loadlazy" width="{{ section.settings.image_1.width }}" height="{{ section.settings.image_1.height }}">
                {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                {%- endif -%}
              </div>
              <div class="price-compare">
                {%- assign product = section.settings.product -%}
                <div class="no-js-hidden" id="price-{{ section.id }}">
                  {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
                </div>
              </div>

              {% if section.settings.product_1_shipping %}
                <div class="shipping-time">{{ section.settings.product_1_shipping }}</div>
              {% endif %}

            </li>
            <li>


              <div class="c_text">
                {% if section.settings.product_2_title %}
                  <h3 class="h2">
                    {{ section.settings.product_2_title }}
                  </h3>
                {% endif %}
                {% if section.settings.product_2_text %}
                  <div class="product_1_text">
                    {{ section.settings.product_2_text }}
                  </div>
                {% endif %}
              </div>

              <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_2 != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}" {% if section.settings.image_2 != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_2.aspect_ratio | times: 100 }}%;"{% endif %}>
                {%- if section.settings.image_2 != blank -%}
                  <img srcset="{%- if section.settings.image_2.width >= 165 -%}{{ section.settings.image_2 | img_url: '165x' }} 165w,{%- endif -%}
                                                                                                      {%- if section.settings.image_2.width >= 323 -%}{{ section.settings.image_2 | img_url: '323x' }} 323w,{%- endif -%}
                                                                                                      {%- if section.settings.image_2.width >= 360 -%}{{ section.settings.image_2 | img_url: '360x' }} 360w,{%- endif -%}
                                                                                                      {%- if section.settings.image_2.width >= 535 -%}{{ section.settings.image_2 | img_url: '535x' }} 535w,{%- endif -%}
                                                                                                      {%- if section.settings.image_2.width >= 750 -%}{{ section.settings.image_2 | img_url: '750x' }} 750w,{%- endif -%}
                                                                                                      {%- if section.settings.image_2.width >= 1070 -%}{{ section.settings.image_2 | img_url: '1070x' }} 1070w,{%- endif -%}
                                                                                                      {%- if section.settings.image_2.width >= 1500 -%}{{ section.settings.image_2 | img_url: '1500x' }} 1500w,{%- endif -%}
                                                                                                      {{ section.settings.image_2 | img_url: 'master' }} {{ section.settings.image_2.width }}w" data-src="{{ section.settings.image_2 | img_url: '1500x' }}" alt="{{ section.settings.image_2.alt | escape }}" loading="lazy" class="loadlazy" width="{{ section.settings.image_2.width }}" height="{{ section.settings.image_2.height }}">
                {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                {%- endif -%}
              </div>
              <div class="price-compare">
                {%- assign product_2 = section.settings.product_2 -%}
                <div class="no-js-hidden" id="price-{{ section.id }}">
                  {%- render 'price', product: product_2, use_variant: true, show_badges: true, price_class: 'price--large' -%}
                </div>
              </div>

              {% if section.settings.product_2_shipping %}
                <div class="shipping-time">{{ section.settings.product_2_shipping }}</div>
              {% endif %}

            </li>
          </ul>
        </div>
        <div class="pop-spec">
          {%- for block in section.blocks -%}
            <div class="spec_ul" {{ block.shopify_attributes }}>
              {% if block.settings.title != blank %}
                <div class="name">
                  <div>{{ block.settings.title }}</div>
                  <span>
                    {% render 'icon-more' %}</span>
                </div>
              {% endif %}
              {% if block.settings.html != blank %}
                <div class="spec_rte">{{ block.settings.html }}
                </div>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      </div>
      <div class="showall wanne_read_more">
        <a href="javascript:void(0);">
          {% render 'icon-more' %}
        </a>
      </div>
    </div>
    <button id="ModalClose-{{ section.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'twy-icon-close' %}</button>
  </modal-dialog>


</div>

{% schema %}
  {
    "name": "Compare product",
    "tag": "section",
    "class": "spaced-section compare-product",
    "settings": [
      {
        "type": "text",
        "id": "text",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Compare button"
      },
      {
        "type": "product",
        "id": "product",
        "label": "TENWAYS CGO800S"
      }, {
        "type": "product",
        "id": "product_2",
        "label": "TENWAYS CGO600"
      }, {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      }, {
        "type": "image_picker",
        "id": "image_1",
        "label": "Image 1"
      }, {
        "type": "html",
        "id": "price_800",
        "label": "price 800"
      }, {
        "type": "html",
        "id": "price_600",
        "label": "price 600"
      }, {
        "type": "text",
        "id": "product_1_shipping",
        "label": "CGO800S Shipping time"
      }, {
        "type": "text",
        "id": "product_2_shipping",
        "label": "CGO600 Shipping time"
      }, {
        "type": "richtext",
        "id": "product_1_title",
        "label": "product title"
      }, {
        "type": "text",
        "id": "product_1_text",
        "label": "product text"
      }, {
        "type": "image_picker",
        "id": "image_2",
        "label": "Image 2"
      }, {
        "type": "richtext",
        "id": "product_2_title",
        "label": "product title"
      }, {
        "type": "text",
        "id": "product_2_text",
        "label": "produc2 text"
      }
    ],
    "blocks": [
      {
        "type": "title",
        "name": "title",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          }, {
            "type": "html",
            "id": "html",
            "label": "Html"
          }
        ]
      }, {
        "type": "compare",
        "name": "compare",
        "settings": [
          {
            "type": "text",
            "id": "text",
            "label": "text"
          }, {
            "type": "html",
            "id": "html_1",
            "label": "Compore 1"
          }, {
            "type": "html",
            "id": "html_2",
            "label": "Compore 2"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Compare product"
      }
    ]
  }
{% endschema %}